<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>有奖答题平台</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--<link rel="stylesheet" href="/lib/mobile/css/login.css" />-->
    <link rel="stylesheet" href="/mobile/css/bui.css" />
    <link rel="stylesheet" href="/lib/mobile/css/common.css?111"/>
    <link rel="stylesheet" href="/lib/mobile/css/answer.css?111111"/>
    <style>
        input{
            border: 0;
            text-align:center;
            width: 100px;
            border-bottom:1px solid #cccccc;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="main_title">
        <div class="title_left">
            <span id="qtype"></span>
            <!--<span class="success">回答正确</span>-->
            <!--<span class="error">回答错误</span>-->
        </div>
        <div class="title_right">
            <span class="amount"><b id="index"></b>/<span id="cn"></span></span>
        </div>
    </div>
    <div class="answer_panel">
        <div class="answer_content" id="content">
        </div>
        <div class="answer_source" id="source">
        </div>
        <ul class="answer_choice" id="choice" >
            <!--<li><i></i><span>侩炙人口</span></li>-->
            <!--<li class="error"><i></i><span>侩炙人口</span></li>-->
            <!--<li class="success"><i></i><span>脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口脍炙人口</span></li>-->
        </ul>
        <div class="answer_button">
            <a href="javascript:void(0)" id="answer_top">上一题</a>&nbsp;&nbsp;
            <a href="javascript:void(0)" id="answer_next">下一题</a></div>
        <!--<div class="answer_button"><a href="javascript:void(0)" id="answer_next">下一题</a></div>-->
    </div>
</div>
<!-- 依赖库 手机调试的js引用顺序如下 -->
<script src="/lib/mobile/js/zepto.js"></script>
<script src="/lib/mobile/js/plugins/fastclick.js"></script>
<script src="/lib/mobile/js/bui.js"></script>
<script src="/lib/mobile/js/common.js?66    "></script>
<script>
    //答题题库数组
    var tkArr=[];
    //答题索引
    var indexflag=0;
    //答题ID
    var dtid;
    //题库ID
    var qid;
    //题型：多选题、单选题、判断题、填空题
    var qtype;
    //暂存的正确答案
    var rightanswer;
    //给出的结果
    var doresult='';
    //答题是否结束状态位
    var isOver='';
    //控制台确认结束状态位
    var isOverStatus='';
    //返回的答案
    var retresult;
    bui.ready(function () {
        // 这里写业务及控件初始化
        var storage = bui.storage();
        var uid=storage.get("uid");
        bui.btn({id: ".bui-page", handle: ".bui-btn"}).load();
        var pageview = {};
        pageview.init = function () {
            // 验证码示例
            if(isOverStatus=='over'){
                bui.load({ url: BASE_URL+"mobile/answer_finish"});
            }else{
                $("#answer_next").on("click", function (argument) {
                    // console.log(indexflag+"==="+(tkArr.length));
                    if(indexflag<tkArr.length-1){
                        $("#answer_top").html("上一题");
                        addRandomQuestion(uid[0]);
                        indexflag++;
                        doHtml();
                    }else if(indexflag==tkArr.length-1){
                        storage.set("dtid",dtid);
                        $("#answer_next").html("确认答题结束");
                        //当题库索引和数组长度一致时，答题结束
                        isOver='over';
                        addRandomQuestion(uid[0]);
                    }
                });
                $("#answer_top").on("click", function (argument) {
                    if(indexflag==0){
                        // console.log((indexflag+1)+"===answer_top0")
                        $("#answer_top").html("已经是第一题");
                    }else if(indexflag>0){
                        indexflag--;
                        addRandomQuestion(uid[0]);
                        // console.log((indexflag)+"===answer_top")
                        doHtml();
                    }
                });
            }
            // console.log(uid[0]);
            doRandomQuestion(uid[0]);

        }
        pageview.init();
    });
    function addRandomQuestion(uid) {
        doresult = dealAnswer();
        // console.log(doresult);
        // return;
        var iscorrect=0;
        //当答题结果和暂存正确结果相同时，积分自增10
        if(doresult==rightanswer){
            iscorrect=1;
        }
        //执行登录操作
        var loginAjax = bui.ajax({
            url: BASE_URL+"mobile/addRandomQuestion",
            // 可选参数
            data: {
                uid:uid,
                dtid:dtid,
                qid:qid,
                doresult:doresult,
                iscorrect:iscorrect,
                isOver:isOver,
            },
            method: "POST"
        });
        loginAjax.then(function(res) {
            if(res.code == 0&&isOver=='over'){
                bui.alert(res.msg);
                bui.load({ url: BASE_URL+"mobile/answer_finish"});
            }else if(res.code == -1&&isOver=='over'){
                bui.alert(res.msg);
            }
            // console.log(res.data);
            retresult =res.data.doresult;
        },function(res) {
            bui.alert("请求异常");
        })
        doresult='';
    }

    function doRandomQuestion(uid) {
        // console.log(uid);
        //执行登录操作
        var loginAjax = bui.ajax({
            url: BASE_URL+"mobile/doRandomQuestion",
            // 可选参数
            data: {
                uid:uid
            },
            method: "POST"
        });
        loginAjax.then(function(res) {
            // console.log(res);
            if(res.code == 0){
                var data = res.data;
                dtid = data.dtid;
                tkArr=data.list;
                // console.log(tkArr)
                doHtml();
            }else{
                bui.alert(res.msg);
                bui.load({ url: BASE_URL+"mobile/index"});
            }
        },function(res) {
            bui.alert("请求异常");
        })
    }
    function doHtml() {
        if(typeof(tkArr)!='undefined'&&indexflag<tkArr.length){

            // console.log(indexflag+"=="+resultArr);

            var content =tkArr[indexflag].qcontent;
            // var reg = new RegExp("____","g");
            // console.log(indexflag+"==doHtml")
           // var rightcontent= content.replace(reg,"<input type=\"text\" name=\"result\" value=\"\" placeholder=\"\" />");
           //  console.log(rightcontent)

            var doresult ;
            if(retresult){
                doresult=retresult;
            }else{
                doresult='';
            }
            $("#content").html(content);
            $("#source").html('');
            $("#index").html(indexflag+1);
            $("#cn").html(tkArr.length);
            qtype=tkArr[indexflag].qtype;
            qid=tkArr[indexflag].qid;
            $("#qtype").html(qtype);
            if(qtype=='填空题'){
                $("#choice").html("");
                rightanswer = tkArr[indexflag].optiona;
            }else{
                rightanswer = tkArr[indexflag].correct;
                var html='';
                var aclass='';
                var bclass='';
                var cclass='';
                var dclass='';
                var eclass='';
                var fclass='';
                var gclass='';
                var hclass='';
                // if(doresult.indexOf('A')>=0){
                //     aclass='success'
                // }
                // if(doresult.indexOf('B')>=0){
                //     bclass='success'
                // }
                //
                // if(doresult.indexOf('C')>=0){
                //     cclass='success'
                // }
                // if(doresult.indexOf('D')>=0){
                //     dclass='success'
                // }
                // if(doresult.indexOf('E')>=0){
                //     eclass='success'
                // }
                // if(doresult.indexOf('F')>=0){
                //     fclass='success'
                // }
                // if(doresult.indexOf('G')>=0){
                //     gclass='success'
                // }
                // if(doresult.indexOf('H')>=0){
                //     hclass='success'
                // }
                if(tkArr[indexflag].optiona){
                    html=html+"<li class='"+aclass+"'><i>A</i><span>"+tkArr[indexflag].optiona+"</span></li>";
                }
                if(tkArr[indexflag].optionb){
                    html=html+"<li class='"+bclass+"'><i>B</i><span>"+tkArr[indexflag].optionb+"</span></li>";
                }
                if(tkArr[indexflag].optionc){
                    html=html+"<li class='"+cclass+"'><i>C</i><span>"+tkArr[indexflag].optionc+"</span></li>";
                }
                if(tkArr[indexflag].optiond){
                    html=html+"<li class='"+dclass+"'><i>D</i><span>"+tkArr[indexflag].optiond+"</span></li>";
                }
                if(tkArr[indexflag].optione){
                    html=html+"<li class='"+eclass+"'><i>E</i><span>"+tkArr[indexflag].optione+"</span></li>";
                }
                if(tkArr[indexflag].optionf){
                    html=html+"<li class='"+fclass+"'><i>F</i><span>"+tkArr[indexflag].optionf+"</span></li>";
                }
                if(tkArr[indexflag].optiong){
                    html=html+"<li class='"+gclass+"'><i>G</i><span>"+tkArr[indexflag].optiong+"</span></li>";
                }
                if(tkArr[indexflag].optionh){
                    html=html+"<li class='"+hclass+"'><i>H</i><span>"+tkArr[indexflag].optionh+"</span></li>";
                }
                $("#choice").html(html);
            }
            // if(indexflag==tkArr.length-1){
            //     $("#answer_next").html("确认答题结束");
            // }
            changeLiStyle();
        }
    }
    var res='';
    function dealAnswer() {
        var retVal='';
        var arr=[];
        if(qtype=='填空题'){
            var doresultObj = $("input[name='result']");
            var i=0;
            $("input[name='result']").each(
                function(){
                    arr.push($(this).val());
                    retVal=arr.join("|");
                }
            )
        }else{
            retVal=res;
        }
        // console.log(indexflag+"===================")
        // resultArr[indexflag]=retVal;
        return retVal;
    }
    //选中li
    var temp;
    //判断是否选中
    var ishasclass = false;
    function changeLiStyle() {
        var arr=[];
        //点击次数
        var i=0;

        if(qtype=='多选题') {
            $("#choice li").click(function () {
                var ishasclass = $(this).hasClass("success");
                if (ishasclass) {
                    $(this).removeClass('success');
                    arr.remove($(this)[0].innerText.substring(0, 1));
                    arr = arr.sort();
                    res = arr.join("");
                } else {
                    $(this).addClass('success');
                    arr.push($(this)[0].innerText.substring(0, 1));
                    arr = arr.sort();
                    res = arr.join("");
                }
            });
        }else{
            $("#choice li").click(function () {
                if(i==0){
                    temp=$(this);
                    $(this).addClass('success');
                    ishasclass = $(this).hasClass("success");
                    res = $(this)[0].innerText.substring(0, 1);
                    i++;
                } else if(ishasclass){
                    i--;
                    // console.log(temp);
                    temp.removeClass('success');
                    $(this).addClass('success');
                    res = $(this)[0].innerText.substring(0, 1);
                    temp=$(this);
                    ishasclass=$(this).hasClass("success");
                    i++;
                }
            });
        }
    }
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>
</body>
</html>
